<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="currentTab" align-center finish-status="success">
          <el-step title="商品信息" />
          <el-step title="商品详情" />
          <el-step title="其他设置" />
          <el-step title="规格设置" />
        </el-steps>
      </div>
      <el-form ref="formValidate" v-loading="fullscreenLoading" class="formValidate mt20" :rules="ruleValidate"
        :model="formValidate" label-width="130px" @submit.native.prevent>
        <el-row v-show="currentTab === 0" :gutter="24">
          <!-- 商品信息-->
          <el-col v-bind="grid2">
            <el-form-item label="商品名称：" prop="store_name">
              <el-input v-model="formValidate.store_name" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商户商品分类：" prop="mer_cate_id">
              <el-cascader v-model="formValidate.mer_cate_id" class="selWidth" :options="merCateList" :props="propsMer"
                filterable clearable />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="平台商品分类：" prop="cate_id">
              <el-cascader v-model="formValidate.cate_id" class="selWidth" :options="categoryList" :props="props"
                filterable clearable />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2" v-show="false">
            <el-form-item label="品牌选择：" prop="brand_id">
              <el-select v-model="formValidate.brand_id" filterable placeholder="请选择" class="selWidth">
                <el-option v-for="item in BrandList" :key="item.brand_id" :label="item.brand_name"
                  :value="item.brand_id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2" v-show="false">
            <el-form-item label="商品关键字：">
              <el-input v-model="formValidate.keyword" placeholder="请输入商品关键字" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品标签：">
              <el-input v-model="formValidate.keyword" placeholder="请输入商品标签" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="单位：" prop="unit_name">
              <el-input v-model="formValidate.unit_name" placeholder="请输入单位" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品简介：" prop="store_info">
              <el-input v-model="formValidate.store_info" type="textarea" :rows="3" placeholder="请输入商品简介" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品封面图：" prop="image">
              <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1')">
                <div v-if="formValidate.image" class="pictrue">
                  <img :src="formValidate.image">
                </div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont" />
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品轮播图：" prop="slider_image">
              <div class="acea-row">
                <div v-for="(item,index) in formValidate.slider_image" :key="index" class="pictrue" draggable="false"
                  @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)">
                  <img :src="item">
                  <i class="el-icon-error btndel" @click="handleRemove(index)" />
                </div>
                <div v-if="formValidate.slider_image.length < 10" class="uploadCont" title="750*750px">
                  <div class="upLoadPicBox" @click="modalPicTap('2')">
                    <div class="upLoad">
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主图视频：" prop="video_link">
              <el-input v-model="videoLink" class="perW50" placeholder="请输入视频链接" />
              <input ref="refid" type="file" style="display:none" @change="zh_uploadFile_change">
              <el-button type="primary" icon="ios-cloud-upload-outline" class="uploadVideo" @click="zh_uploadFile">
                {{ videoLink ? '确认添加' : '上传视频' }}
              </el-button>
              <!--              <Progress :percent = progress :stroke-width="5" v-if="upload.videoIng" />-->
              <el-progress v-if="upload.videoIng" :percentage="progress" :text-inside="true" :stroke-width="26" />
              <div v-if="formValidate.video_link" class="iview-video-style">
                <video style="width:100%;height: 100%!important;border-radius: 10px;" :src="formValidate.video_link"
                  controls="controls">您的浏览器不支持 video 标签。</video>
                <div class="mark" />
                <i class="el-icon-delete iconv" @click="delVideo" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="运费模板：" prop="temp_id">
              <div class="acea-row">
                <el-select v-model="formValidate.temp_id" placeholder="请选择" class="selWidthd mr20">
                  <el-option v-for="item in shippingList" :key="item.shipping_template_id" :label="item.name"
                    :value="item.shipping_template_id" />
                </el-select>
                <el-button class="mr15" size="small" @click="addTem">添加运费模板</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="购买后赠送优惠券：" class="proCoupon">
              <div class="acea-row">
                <el-tag v-for="(tag, index) in formValidate.couponData" :key="index" class="mr10" closable
                  :disable-transitions="false" @close="handleCloseCoupon(tag)">{{ tag.title }}</el-tag>
                <el-button class="mr15" size="mini" @click="addCoupon">选择优惠券</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 商品详情-->
        <el-row v-show="currentTab === 1">
          <el-col :span="24">
            <el-form-item label="商品详情：">
              <vue-ueditor-wrap v-model="formValidate.content" :config="myConfig" @beforeInit="addCustomDialog" />
              <!--              <ueditorFrom v-model="formValidate.content" :content="formValidate.content"/>-->
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 其他设置-->
        <el-row v-show="currentTab === 2">
          <el-col :span="24">
            <el-col v-bind="grid">
              <el-form-item label="单次最多购买件数：">
                <el-input-number v-model="formValidate.once_count" placeholder="请输入购买件数" /> &nbsp;&nbsp;默认为0，则不限制购买件数
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col v-bind="grid">
              <el-form-item label="排序：">
                <el-input-number v-model="formValidate.sort" placeholder="请输入排序" />
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <!-- <el-form-item label="商品推荐："> -->
            <el-form-item label="是否首页显示：">
              <el-checkbox-group v-model="checkboxGroup" size="small" @change="onChangeGroup">
                <el-checkbox v-for="(item, index) in recommend" :key="index" :label="item.value">{{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品属性：">
              <el-radio-group v-model="formValidate.radio">
                <el-radio :label="0">普通商品</el-radio>
                <el-radio :label="1">促销商品</el-radio>
                <el-radio :label="2">满减商品（满件打折）</el-radio>
                <el-radio :label="3">换购商品</el-radio>
              </el-radio-group>
              <div v-if="formValidate.radio == 2">
                <div>
                  <el-input-number v-model="formValidate.reduce_num" :min="0" placeholder="请输入件数" />满xx件商品才可打折
                </div>
                <el-input-number v-model="formValidate.reduce_discount" :min="0" placeholder="请输入折扣" />%，满足条件打xx折
              </div>
              <div v-if="formValidate.radio == 3">
                <el-input-number v-model="formValidate.exchange_amount" :min="0" placeholder="请输入金额" />满xx元可换购
              </div>

            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="平台保障服务：" v-show="false">
              <div class="acea-row">
                <el-select v-model="formValidate.guarantee_template_id" placeholder="请选择" clearable
                  class="selWidthd mr20">
                  <el-option v-for="item in guaranteeList" :key="item.guarantee_template_id" :label="item.template_name"
                    :value="item.guarantee_template_id" />
                </el-select>
                <el-button class="mr15" size="small" @click="addServiceTem">添加服务说明模板</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否开启礼包：" v-show="false">
              <el-radio-group v-model="formValidate.is_gift_bag" :disabled="$route.params.id ? true : false">
                <el-radio :label="0" class="radio">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="currentTab === 3">
          <el-col :span="24">
            <el-form-item label="商品规格：" props="spec_type">
              <el-radio-group v-model="formValidate.spec_type" @change="onChangeSpec(formValidate.spec_type)">
                <el-radio :label="0" class="radio">单规格</el-radio>
                <el-radio :label="1" >多规格</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="extensionStatus>0" label="佣金设置：" props="extension_type">
              <el-radio-group v-model="formValidate.extension_type" @change="onChangetype(formValidate.extension_type)">
                <el-radio :label="1" class="radio">单独设置</el-radio>
                <el-radio :label="0">默认设置</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否开启积分抵扣：" props="is_point_deduction" @change="point_deduction">
              <el-radio-group v-model="formValidate.is_point_deduction">
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否开启会员折扣：" props="is_member_discount" @change="point_deduction">
              <el-radio-group v-model="formValidate.is_member_discount">
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="deductionStatus>0" label="积分抵扣比例：">
              <el-radio-group v-model="deduction_set" @change="changeIntergral(deduction_set)">
                <el-radio :label="1" class="radio">单独设置</el-radio>
                <el-radio :label="-1">默认设置</el-radio>
              </el-radio-group>
              <div v-if="deduction_set == 1">
                <el-input-number v-model="formValidate.integral_rate" :min="0" placeholder="请输入抵扣比例" />%
              </div>
            </el-form-item>
          </el-col>
          <!-- 多规格添加-->
          <el-col v-if="formValidate.spec_type === 1" :span="24" class="noForm">
            <el-form-item label="选择规格：">
              <div class="acea-row">
                <el-select v-model="selectRule">
                  <el-option v-for="item in ruleList" :key="item.attr_template_id" :label="item.template_name"
                    :value="item.attr_template_id" />
                </el-select>
                <el-button type="primary" class="mr20" @click="confirm">确认</el-button>
                <el-button class="mr15" @click="addRule">添加规格模板</el-button>
              </div>
            </el-form-item>
            <el-form-item v-if="formValidate.attr.length > 0">
              <div v-for="(item, index) in formValidate.attr" :key="index">
                <div class="acea-row row-middle">
                  <span class="mr5">{{ item.value }}</span>
                  <i class="el-icon-circle-close" @click="handleRemoveAttr(index)" />
                </div>
                <div class="rulesBox">
                  <el-tag v-for="(j, indexn) in item.detail" :key="indexn" closable size="medium"
                    :disable-transitions="false" class="mb5 mr10" @close="handleClose(item.detail,indexn)">{{ j }}
                  </el-tag>
                  <el-input v-if="item.inputVisible" ref="saveTagInput" v-model="item.detail.attrsVal"
                    class="input-new-tag" size="small" @keyup.enter.native="createAttr(item.detail.attrsVal,index)"
                    @blur="createAttr(item.detail.attrsVal,index)" />
                  <el-button v-else class="button-new-tag" size="small" @click="showInput(item)">+ 添加</el-button>
                </div>
              </div>
            </el-form-item>
            <el-col v-if="isBtn">
              <el-col :xl="6" :lg="9" :md="9" :sm="24" :xs="24">
                <el-form-item label="规格：">
                  <el-input v-model="formDynamic.attrsName" placeholder="请输入规格" />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="9" :md="9" :sm="24" :xs="24">
                <el-form-item label="规格值：">
                  <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值" />
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="6" :md="6" :sm="24" :xs="24">
                <el-form-item class="noLeft">
                  <el-button type="primary" class="mr15" @click="createAttrName">确定</el-button>
                  <el-button @click="offAttrName">取消</el-button>
                </el-form-item>
              </el-col>
            </el-col>
            <el-form-item v-if="!isBtn">
              <el-button type="primary" icon="md-add" class="mr15" @click="addBtn">添加新规格</el-button>
            </el-form-item>
          </el-col>
          <!-- 批量设置-->
          <el-col v-if="formValidate.spec_type === 1 && formValidate.attr.length>0" :span="24" class="noForm">
            <el-form-item label="批量设置：" class="labeltop">
              <el-table :data="oneFormBatch" border class="tabNumWidth" size="mini">
                <el-table-column align="center" label="图片" min-width="80">
                  <template slot-scope="scope">
                    <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1','pi')">
                      <div v-if="scope.row.image" class="pictrue tabPic">
                        <img :src="scope.row.image">
                      </div>
                      <div v-else class="upLoad tabPic">
                        <i class="el-icon-camera cameraIconfont" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title" align="center"
                  min-width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'" :min="0"
                      class="priceBox" />
                  </template>
                </el-table-column>
                <template v-if="formValidate.extension_type === 1">
                  <el-table-column align="center" label="一级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_one" type="number" :min="0" class="priceBox" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="二级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_two" type="number" :min="0" class="priceBox" />
                    </template>
                  </el-table-column>
                </template>
                <el-table-column align="center" label="操作" min-width="80">
                  <template>
                    <el-button type="text" class="submission" @click="batchAdd">批量添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <!-- 单规格表格-->
            <el-form-item v-if="formValidate.spec_type === 0">
              <el-table :data="OneattrValue" border class="tabNumWidth" size="mini">
                <el-table-column align="center" label="图片" min-width="80">
                  <template slot-scope="scope">
                    <div class="upLoadPicBox" @click="modalPicTap('1', 'dan', 'pi')">
                      <div v-if="formValidate.image" class="pictrue tabPic">
                        <img :src="scope.row.image">
                      </div>
                      <div v-else class="upLoad tabPic">
                        <i class="el-icon-camera cameraIconfont" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title" align="center"
                  min-width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'" :min="0"
                      class="priceBox" />
                  </template>
                </el-table-column>
                <template v-if="formValidate.extension_type === 1">
                  <el-table-column align="center" label="一级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_one" type="number" :min="0" class="priceBox" />
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="二级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_two" type="number" :min="0" class="priceBox" />
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </el-form-item>
            <!-- 多规格表格-->
            <el-form-item v-if="formValidate.spec_type === 1 && formValidate.attr.length>0" class="labeltop"
              label="规格列表：">
              <el-table :data="ManyAttrValue" border class="tabNumWidth" size="mini">
                <template v-if="manyTabDate">
                  <el-table-column v-for="(item,iii) in manyTabDate" :key="iii" align="center"
                    :label="manyTabTit[iii].title" min-width="80">
                    <template slot-scope="scope">
                      <span class="priceBox" v-text="scope.row[iii]" />
                    </template>
                  </el-table-column>
                </template>
                <el-table-column align="center" label="图片" min-width="80">
                  <template slot-scope="scope">
                    <div class="upLoadPicBox" title="750*750px" @click="modalPicTap('1','duo',scope.$index)">
                      <div v-if="scope.row.image" class="pictrue tabPic">
                        <img :src="scope.row.image">
                      </div>
                      <div v-else class="upLoad tabPic">
                        <i class="el-icon-camera cameraIconfont" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title" align="center"
                  min-width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'"
                      class="priceBox" />
                  </template>
                </el-table-column>
                <template v-if="formValidate.extension_type === 1">
                  <el-table-column key="1" align="center" label="一级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_one" type="number" :min="0" class="priceBox" />
                    </template>
                  </el-table-column>
                  <el-table-column key="2" align="center" label="二级返佣(元)" min-width="120">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.extension_two" type="number" :min="0" class="priceBox" />
                    </template>
                  </el-table-column>
                </template>
                <!--<el-table-column key="3" align="center" label="操作" min-width="80">
                  <template slot-scope="scope">
                    <el-button type="text" class="submission" @click="delAttrTable(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>-->
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="margin-top:30px;">
          <el-button v-show="currentTab>0" type="primary" class="submission" size="small" @click="handleSubmitUp">上一步
          </el-button>
          <el-button v-show="currentTab<3" type="primary" class="submission" size="small"
            @click="handleSubmitNest('formValidate')">下一步</el-button>
          <el-button v-show="currentTab===3 || $route.params.id" :loading="loading" type="primary" class="submission"
            size="small" @click="handleSubmit('formValidate')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--添加服务保障模板-->
    <guarantee-service ref="serviceGuarantee" @get-list="getGuaranteeList" />
    <!--预览商品-->
    <div v-if="previewVisible">
      <div class="bg" @click.stop="previewVisible = false" />
      <preview-box v-if="previewVisible" ref="previewBox" :preview-key="previewKey" />
    </div>
  </div>
</template>

<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------
  import ueditorFrom from '@/components/ueditorFrom'
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import {
    shippingListApi,
    templateLsitApi,
    productCreateApi,
    productDetailApi,
    categorySelectApi,
    categoryListApi,
    categoryBrandListApi,
    productUpdateApi,
    productConfigApi,
    productGetTempKeysApi,
    guaranteeListApi,
    productPreviewApi
  } from '@/api/product'
  import {
    roterPre
  } from '@/settings'
  import guaranteeService from '@/components/serviceGuarantee/index'
  import previewBox from '@/components/previewBox/index'
  const defaultObj = {
    image: '',
    slider_image: [],
    store_name: '',
    store_info: '',
    keyword: '',
    brand_id: '1', // 品牌id
    cate_id: '', // 平台分类id
    mer_cate_id: [], // 商户分类id
    unit_name: '',
    sort: 0,
    once_count: 0,
    is_good: 0,
    temp_id: '',
    video_link: '',
    guarantee_template_id: '',
    product_id: '',
    is_reduce: 0,
    reduce_num: "",
    reduce_discount: "",
    exchange_amount: "",
    attrValue: [{
      image: '',
      price: null,
      cost: null,
      ot_price: null,
      stock: null,
      bar_code: '',
      weight: null,
      volume: null
    }],
    attr: [],
    extension_type: 0,
    is_point_deduction: 0,
    integral_rate: -1,
    is_member_discount: 0,
    content: '',
    spec_type: 0,
    give_coupon_ids: [],
    is_gift_bag: 0,
    couponData: []
  }
  const objTitle = {
    price: {
      title: '售价'
    },
    cost: {
      title: '成本价'
    },
    ot_price: {
      title: '原价'
    },
    stock: {
      title: '库存'
    },
    bar_code: {
      title: '商品编号'
    },
    weight: {
      title: '重量（KG）'
    },
    volume: {
      title: '体积(m³)'
    }
  }
  const proOptions = [{
    name: '店铺推荐',
    value: 'is_good'
  }]
  export default {
    name: 'ProductProductAdd',
    components: {
      ueditorFrom,
      VueUeditorWrap,
      guaranteeService,
      previewBox
    },
    data() {
      return {
        myConfig: {
          autoHeightEnabled: false, // 编辑器不自动被内容撑高
          initialFrameHeight: 500, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器宽度
          UEDITOR_HOME_URL: '/UEditor/',
          serverUrl: ''
        },
        optionsCate: {
          value: 'store_category_id',
          label: 'cate_name',
          children: 'children',
          emitPath: false
        },
        roterPre: roterPre,
        selectRule: '',
        checkboxGroup: [],
        radio: [],
        recommend: proOptions,
        tabs: [],
        fullscreenLoading: false,
        props: {
          emitPath: false
        },
        propsMer: {
          emitPath: false,
          multiple: true
        },
        active: 0,
        deduction_set: -1,
        OneattrValue: [Object.assign({}, defaultObj.attrValue[0])], // 单规格
        ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
        ruleList: [],
        merCateList: [], // 商户分类筛选
        categoryList: [], // 平台分类筛选
        shippingList: [], // 运费模板
        guaranteeList: [], // 服务保障模板
        BrandList: [], // 品牌
        formThead: Object.assign({}, objTitle),
        formValidate: Object.assign({}, defaultObj),
        picValidate: true,
        formDynamics: {
          template_name: '',
          template_value: []
        },
        manyTabTit: {},
        manyTabDate: {},
        grid2: {
          xl: 10,
          lg: 12,
          md: 12,
          sm: 24,
          xs: 24
        },
        // 规格数据
        formDynamic: {
          attrsName: '',
          attrsVal: ''
        },
        isBtn: false,
        manyFormValidate: [],
        images: [],
        currentTab: 0,
        isChoice: '',
        upload: {
          videoIng: false // 是否显示进度条；
        },
        progress: 10, // 进度条默认0
        videoLink: '',
        grid: {
          xl: 8,
          lg: 8,
          md: 12,
          sm: 24,
          xs: 24
        },
        loading: false,
        ruleValidate: {
          give_coupon_ids: [{
            required: true,
            message: '请选择优惠券',
            trigger: 'change',
            type: 'array'
          }],
          store_name: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }],
          mer_cate_id: [{
            required: true,
            message: '请选择商户分类',
            trigger: 'change',
            type: 'array',
            min: '1'
          }],
          cate_id: [{
            required: true,
            message: '请选择平台分类',
            trigger: 'change'
          }],
          keyword: [{
            required: true,
            message: '请输入商品关键字',
            trigger: 'blur'
          }],
          unit_name: [{
            required: true,
            message: '请输入单位',
            trigger: 'blur'
          }],
          store_info: [{
            required: true,
            message: '请输入商品简介',
            trigger: 'blur'
          }],
          temp_id: [{
            required: true,
            message: '请选择运费模板',
            trigger: 'change'
          }],
          brand_id: [{
            required: true,
            message: '请选择品牌',
            trigger: 'change'
          }],
          image: [{
            required: true,
            message: '请上传商品图',
            trigger: 'change'
          }],
          slider_image: [{
            required: true,
            message: '请上传商品轮播图',
            type: 'array',
            trigger: 'change'
          }],
          spec_type: [{
            required: true,
            message: '请选择商品规格',
            trigger: 'change'
          }]
        },
        attrInfo: {},
        keyNum: 0,
        extensionStatus: 0,
        deductionStatus: 0,
        previewVisible: false,
        previewKey: ''
      }
    },
    computed: {
      attrValue() {
        const obj = Object.assign({}, defaultObj.attrValue[0])
        delete obj.image
        return obj
      },
      oneFormBatch() {
        const obj = [Object.assign({}, defaultObj.attrValue[0])]
        delete obj[0].bar_code
        return obj
      }
    },
    watch: {
      'formValidate.attr': {
        handler: function(val) {
          if (this.formValidate.spec_type === 1) this.watCh(val)
        },
        immediate: false,
        deep: true
      }
    },
    created() {
      // console.log(this.$route)
      this.tempRoute = Object.assign({}, this.$route)
      if (this.$route.params.id && this.formValidate.spec_type === 1) {
        this.$watch('formValidate.attr', this.watCh)
      }
    },
    mounted() {
      this.formValidate.slider_image = []
      if (this.$route.params.id) {
        this.setTagsViewTitle()
        this.getInfo()
      } else {
        if (this.deduction_set == -1) this.formValidate.integral_rate = -1
      }
      this.formValidate.attr.map(item => {
        this.$set(item, 'inputVisible', false)
      })
      this.getCategorySelect()
      this.getCategoryList()
      this.getBrandListApi()
      this.getShippingList()
      this.getGuaranteeList()
      this.productCon()
      this.productGetRule()
      this.$store.dispatch('settings/setEdit', true)
    },
    destroyed() {
      window.removeEventListener('popstate', this.goBack, false)
    },
    methods: {
      goBack() {
        // console.log("点击了浏览器的返回按钮");
        sessionStorage.clear()
        window.history.back()
      },
      handleCloseCoupon(tag) {
        this.formValidate.couponData.splice(this.formValidate.couponData.indexOf(tag), 1)
        this.formValidate.give_coupon_ids = []
        this.formValidate.couponData.map(item => {
          this.formValidate.give_coupon_ids.push(item.coupon_id)
        })
      },
      productCon() {
        productConfigApi()
          .then(res => {
            this.extensionStatus = res.data.extension_status
            this.deductionStatus = res.data.integral_status
          })
          .catch(res => {
            this.$message.error(res.message)
          })
      },
      addCoupon() {
        const _this = this
        this.$modalCoupon(
          this.formValidate.couponData,
          'wu',
          _this.formValidate.give_coupon_ids,
          (this.keyNum += 1),
          function(row) {
            _this.formValidate.give_coupon_ids = []
            _this.formValidate.couponData = row
            row.map(item => {
              _this.formValidate.give_coupon_ids.push(item.coupon_id)
            })
          }
        )
      },
      setTagsViewTitle() {
        const title = '编辑商品'
        const route = Object.assign({}, this.tempRoute, {
          title: `${title}-${this.$route.params.id}`
        })
        this.$store.dispatch('tagsView/updateVisitedView', route)
      },
      onChangeGroup() {
        this.checkboxGroup.includes('is_good') ?
          (this.formValidate.is_good = 1) :
          (this.formValidate.is_good = 0)
      },
      watCh(val) {
        const tmp = {}
        const tmpTab = {}
        this.formValidate.attr.forEach((o, i) => {
          tmp['value' + i] = {
            title: o.value
          }
          tmpTab['value' + i] = ''
        })
        // console.log(this.ManyAttrValue)
        this.ManyAttrValue = this.attrFormat(val)
        this.ManyAttrValue.forEach((val, index) => {
          const key = Object.values(val.detail)
            .sort()
            .join('/')
          if (this.attrInfo[key]) this.ManyAttrValue[index] = this.attrInfo[key]
        })
        this.attrInfo = {}
        this.ManyAttrValue.forEach(val => {
          // this.attrInfo[Object.values(val.detail).sort().join('/')] = val
          if (val.detail !== 'undefined' && val.detail !== null) {
            this.attrInfo[
              Object.values(val.detail)
              .sort()
              .join('/')
            ] = val
          }
        })
        this.manyTabTit = tmp
        this.manyTabDate = tmpTab
        this.formThead = Object.assign({}, this.formThead, tmp)
        console.log(this.manyTabTit)
      },
      attrFormat(arr) {
        let data = []
        const res = []
        return format(arr)

        function format(arr) {
          if (arr.length > 1) {
            arr.forEach((v, i) => {
              if (i === 0) data = arr[i]['detail']
              const tmp = []
              data.forEach(function(vv) {
                arr[i + 1] &&
                  arr[i + 1]['detail'] &&
                  arr[i + 1]['detail'].forEach(g => {
                    const rep2 =
                      (i !== 0 ? '' : arr[i]['value'] + '_$_') +
                      vv +
                      '-$-' +
                      arr[i + 1]['value'] +
                      '_$_' +
                      g
                    tmp.push(rep2)
                    if (i === arr.length - 2) {
                      const rep4 = {
                        image: '',
                        price: 0,
                        cost: 0,
                        ot_price: 0,
                        stock: 0,
                        bar_code: '',
                        weight: 0,
                        volume: 0,
                        brokerage: 0,
                        brokerage_two: 0
                      }
                      rep2.split('-$-').forEach((h, k) => {
                        const rep3 = h.split('_$_')
                        if (!rep4['detail']) rep4['detail'] = {}
                        rep4['detail'][rep3[0]] = rep3.length > 1 ? rep3[1] : ''
                      })
                      // if(rep4.detail !== 'undefined' && rep4.detail !== null){
                      Object.values(rep4.detail).forEach((v, i) => {
                        rep4['value' + i] = v
                      })
                      // }

                      res.push(rep4)
                    }
                  })
              })
              data = tmp.length ? tmp : []
            })
          } else {
            const dataArr = []
            arr.forEach((v, k) => {
              v['detail'].forEach((vv, kk) => {
                dataArr[kk] = v['value'] + '_' + vv
                res[kk] = {
                  image: '',
                  price: 0,
                  cost: 0,
                  ot_price: 0,
                  stock: 0,
                  bar_code: '',
                  weight: 0,
                  volume: 0,
                  brokerage: 0,
                  brokerage_two: 0,
                  detail: {
                    [v['value']]: vv
                  }
                }
                // if(res[kk].detail !== 'undefined' && res[kk].detail !== null){
                Object.values(res[kk].detail).forEach((v, i) => {
                  res[kk]['value' + i] = v
                })
                // }
              })
            })
            data.push(dataArr.join('$&'))
          }
          return res
        }
      },
      // 运费模板
      addTem() {
        const _this = this
        this.$modalTemplates(0, function() {
          _this.getShippingList()
        })
      },
      // 添加服务保障模板
      addServiceTem() {
        this.$refs.serviceGuarantee.add()
      },
      // 删除视频；
      delVideo() {
        const that = this
        that.$set(that.formValidate, 'video_link', '')
      },
      zh_uploadFile() {
        if (this.videoLink) {
          this.formValidate.video_link = this.videoLink
        } else {
          this.$refs.refid.click()
        }
      },
      zh_uploadFile_change(evfile) {
        const that = this
        that.progress = 10
        const suffix = evfile.target.files[0].name.substr(evfile.target.files[0].name.indexOf('.'))
        if (suffix !== '.mp4') {
          return that.$message.error('只能上传MP4文件')
        }

        productGetTempKeysApi().then(res => {
          that.$videoCloud.videoUpload({
            type: res.data.type,
            evfile: evfile,
            res: res,
            uploading(status, progress) {
              that.upload.videoIng = status
            }
          }).then(res => {
            console.log(res)
            that.formValidate.video_link = res.data.src
            that.videoLink = res.data.src
            that.$message.success('视频上传成功')
            that.progress = 100
          }).catch(res => {
            that.upload.videoIng = false
            that.$message.error(res)
          })
        })
      },
      // 添加规则；
      addRule() {
        const _this = this
        this.$modalAttr(this.formDynamics, function() {
          _this.productGetRule()
        })
      },
      // 选择规格
      onChangeSpec(num) {
        if (num === 1) this.productGetRule()
      },
      // 切换积分抵扣
      changeIntergral(e) {
        if (e == -1) {
          this.formValidate.integral_rate = -1
        } else {
          this.formValidate.integral_rate = this.formValidate.integral_rate
        }
      },
      // 选择属性确认
      confirm() {
        if (!this.selectRule) {
          return this.$message.warning('请选择属性')
        }
        this.ruleList.forEach(item => {
          if (item.attr_template_id === this.selectRule) {
            this.formValidate.attr = item.template_value
          }
        })
      },
      // 商户分类；
      getCategorySelect() {
        categorySelectApi()
          .then(res => {
            this.merCateList = res.data
          })
          .catch(res => {
            this.$message.error(res.message)
          })
      },
      // 平台分类；
      getCategoryList() {
        categoryListApi()
          .then(res => {
            this.categoryList = res.data
          })
          .catch(res => {
            this.$message.error(res.message)
          })
      },
      // 品牌筛选；
      getBrandListApi() {
        categoryBrandListApi()
          .then(res => {
            this.BrandList = res.data
          })
          .catch(res => {
            this.$message.error(res.message)
          })
      },
      // 获取商品属性模板；
      productGetRule() {
        templateLsitApi().then(res => {
          this.ruleList = res.data
        })
      },
      // 运费模板；
      getShippingList() {
        shippingListApi().then(res => {
          this.shippingList = res.data
        })
      },
      // 获取服务保障模板
      getGuaranteeList() {
        guaranteeListApi().then(res => {
          this.guaranteeList = res.data
        })
      },
      showInput(item) {
        this.$set(item, 'inputVisible', true)
      },
      point_deduction(e) {
        console.log(e)
      },
      onChangetype(item) {
        if (item === 1) {
          this.OneattrValue.map(item => {
            this.$set(item, 'extension_one', null)
            this.$set(item, 'extension_two', null)
          })
          this.ManyAttrValue.map(item => {
            this.$set(item, 'extension_one', null)
            this.$set(item, 'extension_two', null)
          })
        } else {
          this.OneattrValue.map(item => {
            delete item.extension_one
            delete item.extension_two
            this.$set(item, 'extension_one', null)
            this.$set(item, 'extension_two', null)
          })
          this.ManyAttrValue.map(item => {
            delete item.extension_one
            delete item.extension_two
          })
        }
      },
      // 删除表格中的属性
      delAttrTable(index) {
        this.ManyAttrValue.splice(index, 1)
      },
      // 批量添加
      batchAdd() {
        for (const val of this.ManyAttrValue) {
          this.$set(val, 'image', this.oneFormBatch[0].image)
          this.$set(val, 'price', this.oneFormBatch[0].price)
          this.$set(val, 'cost', this.oneFormBatch[0].cost)
          this.$set(val, 'ot_price', this.oneFormBatch[0].ot_price)
          this.$set(val, 'stock', this.oneFormBatch[0].stock)
          this.$set(val, 'bar_code', this.oneFormBatch[0].bar_code)
          this.$set(val, 'weight', this.oneFormBatch[0].weight)
          this.$set(val, 'volume', this.oneFormBatch[0].volume)
          this.$set(val, 'extension_one', this.oneFormBatch[0].extension_one)
          this.$set(val, 'extension_two', this.oneFormBatch[0].extension_two)
        }
      },
      // 添加按钮
      addBtn() {
        this.clearAttr()
        this.isBtn = true
      },
      // 取消
      offAttrName() {
        this.isBtn = false
      },
      clearAttr() {
        this.formDynamic.attrsName = ''
        this.formDynamic.attrsVal = ''
      },
      // 删除规格
      handleRemoveAttr(index) {
        this.formValidate.attr.splice(index, 1)
        this.manyFormValidate.splice(index, 1)
      },
      // 删除属性
      handleClose(item, index) {
        item.splice(index, 1)
      },
      // 添加规则名称
      createAttrName() {
        if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
          const data = {
            value: this.formDynamic.attrsName,
            detail: [this.formDynamic.attrsVal]
          }
          this.formValidate.attr.push(data)
          var hash = {}
          this.formValidate.attr = this.formValidate.attr.reduce(function(
              item,
              next
            ) {
              /* eslint-disable */
              hash[next.value] ? "" : (hash[next.value] = true && item.push(next));
              return item;
            },
            []);
          this.clearAttr();
          this.isBtn = false;
        } else {
          this.$message.warning("请添加完整的规格！");
        }
      },
      // 添加属性
      createAttr(num, idx) {
        if (num) {
          this.formValidate.attr[idx].detail.push(num);
          var hash = {};
          this.formValidate.attr[idx].detail = this.formValidate.attr[
            idx
          ].detail.reduce(function(item, next) {
            /* eslint-disable */
            hash[next] ? "" : (hash[next] = true && item.push(next));
            return item;
          }, []);
          this.formValidate.attr[idx].inputVisible = false;
        } else {
          this.$message.warning("请添加属性");
        }
      },
      // 详情
      getInfo() {
        this.fullscreenLoading = true;
        productDetailApi(this.$route.params.id)
          .then(async res => {
            let info = res.data;
            console.log(info)
            this.deduction_set = info.integral_rate == -1 ? -1 : 1
            this.formValidate = {
              image: info.image,
              attrValue: info.attrValue,
              slider_image: info.slider_image,
              store_name: info.store_name,
              store_info: info.store_info,
              keyword: info.keyword,
              brand_id: info.brand_id, // 品牌id
              cate_id: info.cate_id, // 平台分类id
              mer_cate_id: info.mer_cate_id, // 商户分类id
              unit_name: info.unit_name,
              sort: info.sort,
              once_count: info.once_count,
              is_good: info.is_good,
              temp_id: info.temp_id,
              guarantee_template_id: info.guarantee_template_id ? info.guarantee_template_id : '',
              attr: info.attr,
              extension_type: info.extension_type,
              content: info.content,
              spec_type: info.spec_type,
              give_coupon_ids: info.give_coupon_ids,
              is_gift_bag: info.is_gift_bag,
              couponData: info.coupon,
              video_link: info.video_link ? info.video_link : "",
              is_reduce: info.is_reduce,
              is_benefit: info.is_benefit,
              reduce_num: info.reduce_num,
              reduce_discount: info.reduce_discount,
              exchange_amount: info.exchange_amount,
              integral_rate: info.integral_rate,
              is_point_deduction: info.is_point_deduction,
              is_member_discount: info.is_member_discount,
              radio: info.is_reduce == 1 ? 2 : info.is_benefit == 1 ? 1 : info.is_change == 1 ? 3 : 0
            };

            if (this.formValidate.spec_type === 0) {
              this.OneattrValue = info.attrValue;
            } else {
              this.ManyAttrValue = info.attrValue;
              this.ManyAttrValue.forEach(val => {
                if (val.detail !== "undefined" && val.detail !== null) {
                  this.attrInfo[
                    Object.values(val.detail)
                    .sort()
                    .join("/")
                  ] = val;
                }
              });
            }
            if (this.formValidate.is_good === 1)
              this.checkboxGroup.push("is_good");
            this.fullscreenLoading = false;
          })
          .catch(res => {
            this.fullscreenLoading = false;
            this.$message.error(res.message);
          });
      },
      handleRemove(i) {
        this.formValidate.slider_image.splice(i, 1);
      },
      // 点击商品图
      modalPicTap(tit, num, i) {
        const _this = this;
        const attr = [];
        this.$modalUpload(function(img) {
          if (tit === "1" && !num) {
            _this.formValidate.image = img[0];
            _this.OneattrValue[0].image = img[0];
          }
          if (tit === "2" && !num) {
            img.map(item => {
              attr.push(item.attachment_src);
              _this.formValidate.slider_image.push(item);
              if (_this.formValidate.slider_image.length > 10)
                _this.formValidate.slider_image.length = 10;
            });
          }
          if (tit === "1" && num === "dan") {
            _this.OneattrValue[0].image = img[0];
          }
          if (tit === "1" && num === "duo") {
            _this.ManyAttrValue[i].image = img[0];
          }
          if (tit === "1" && num === "pi") {
            _this.oneFormBatch[0].image = img[0];
          }
        }, tit);
      },
      handleSubmitUp() {
        if (this.currentTab-- < 0) this.currentTab = 0;
      },
      handleSubmitNest(name) {
        this.$refs[name].validate(valid => {
          if (valid) {
            if (this.currentTab++ > 2) this.currentTab = 0;
          } else {
            if (
              !this.formValidate.store_name ||
              !this.formValidate.cate_id ||
              !this.formValidate.unit_name ||
              !this.formValidate.store_info ||
              !this.formValidate.image ||
              !this.formValidate.slider_image
            ) {
              this.$message.warning("请填写完整商品信息！");
            }
          }
        });
      },
      // 提交
      handleSubmit(name) {
       
        if(this.videoLink){
          this.formValidate.video_link = this.videoLink
        }
        
        this.$store.dispatch("settings/setEdit", false);
        this.onChangeGroup();
        if (this.formValidate.spec_type === 1) {
          this.formValidate.attrValue = this.ManyAttrValue;
        } else {
          this.formValidate.attrValue = this.OneattrValue;
          this.formValidate.attr = [];
        }
        this.$refs[name].validate(valid => {
          if (valid) {
            console.log(this.formValidate)
            console.log(this.$route.params.id)
            // return;
            this.fullscreenLoading = true;
            this.loading = true;
            this.$route.params.id && !this.$route.query.type ?
              productUpdateApi(this.$route.params.id, this.formValidate)
              .then(async res => {
                this.fullscreenLoading = false;
                this.$message.success(res.message);
                this.$router.push({
                  path: this.roterPre + "/product/list"
                });
                this.$refs[name].resetFields();
                this.formValidate.slider_image = [];
                this.loading = false;
              })
              .catch(res => {
                this.fullscreenLoading = false;
                this.loading = false;
                this.$message.error(res.message);
              }) :
              productCreateApi(this.formValidate)
              .then(async res => {
                this.fullscreenLoading = false;
                this.$message.success(res.message);
                this.$router.push({
                  path: this.roterPre + "/product/list"
                });
                this.$refs[name].resetFields();
                this.formValidate.slider_image = [];
                this.loading = false;
              })
              .catch(res => {
                this.fullscreenLoading = false;
                this.loading = false;
                this.$message.error(res.message);
              });
          } else {
            if (
              !this.formValidate.store_name ||
              !this.formValidate.cate_id ||
              !this.formValidate.unit_name ||
              !this.formValidate.store_info ||
              !this.formValidate.image ||
              !this.formValidate.slider_image
            ) {
              this.$message.warning("请填写完整商品信息！");
            }
          }
        });
      },
      //预览
      handlePreview(name) {
        this.onChangeGroup();
        if (this.formValidate.spec_type === 1) {
          this.formValidate.attrValue = this.ManyAttrValue;
        } else {
          this.formValidate.attrValue = this.OneattrValue;
          this.formValidate.attr = [];
        }
        productPreviewApi(this.formValidate)
          .then(async res => {
            this.previewVisible = true;
            this.previewKey = res.data.preview_key;
          })
          .catch(res => {
            this.$message.error(res.message);
          });
      },
      // 表单验证
      validate(prop, status, error) {
        if (status === false) {
          this.$message.warning(error);
        }
      },
      // 规格图片验证
      specPicValidate(ManyAttrValue) {
        for (let i = 0; i < ManyAttrValue.length; i++) {
          if (ManyAttrValue[i].image === "" || !ManyAttrValue[i].image) {
            this.$message.warning("请上传商品规格图！");
            this.picValidate = false;
            break;
          }
        }
      },
      // 移动
      handleDragStart(e, item) {
        this.dragging = item;
      },
      handleDragEnd(e, item) {
        this.dragging = null;
      },
      handleDragOver(e) {
        e.dataTransfer.dropEffect = "move";
      },
      handleDragEnter(e, item) {
        e.dataTransfer.effectAllowed = "move";
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.formValidate.slider_image];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate.slider_image = newItems;
      },
      // 添加自定义弹窗
      addCustomDialog(editorId) {
        window.UE.registerUI(
          "test-dialog",
          function(editor, uiName) {
            // 创建 dialog
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: roterPre + "/admin/widget/image?field=dialog",
              editor: editor,
              name: uiName,
              title: "上传图片",
              cssRules: "width:1200px;height:500px;padding:20px;"
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "dialog-button",
              title: "上传图片",
              cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
              onclick: function() {
                // 渲染dialog
                dialog.render();
                dialog.open();
              }
            });
            return btn;
          },
          37
        );
        window.UE.registerUI(
          "video-dialog",
          function(editor, uiName) {
            let dialog = new window.UE.ui.Dialog({
              iframeUrl: roterPre + "/admin/widget/video?fodder=video",
              editor: editor,
              name: uiName,
              title: "上传视频",
              cssRules: "width:600px;height:420px;padding:10px 20px 20px;"
            });
            this.dialog = dialog;
            let btn = new window.UE.ui.Button({
              name: "video-button",
              title: "上传视频",
              cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
              onclick: function() {
                console.log(dialog)
                // 渲染dialog
                dialog.render();
                dialog.open();
              }
            });
            return btn;
          },
          38
        );
      }
    }
  };
</script>
<style scoped lang="scss">
  .bg {
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .goods_detail .goods_detail_wrapper {
    z-index: -10;
  }

  /deep/ .upLoadPicBox {
    .upLoad {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -o-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      line-height: 20px;
    }

    span {
      font-size: 10px;
    }
  }

  .proCoupon {
    /deep/.el-form-item__content {
      margin-top: 5px;
    }
  }

  .tabPic {
    width: 40px !important;
    height: 40px !important;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .noLeft {
    /deep/.el-form-item__content {
      margin-left: 0 !important;
    }
  }

  .tabNumWidth {
    /deep/.el-input-number--medium {
      width: 121px !important;
    }

    /deep/.el-input-number__increase {
      width: 20px !important;
      font-size: 12px !important;
    }

    /deep/.el-input-number__decrease {
      width: 20px !important;
      font-size: 12px !important;
    }

    /deep/.el-input-number--medium .el-input__inner {
      padding-left: 25px !important;
      padding-right: 25px !important;
    }

    /deep/ thead {
      line-height: normal !important;
    }

    /deep/ .el-table .cell {
      line-height: normal !important;
    }
  }

  .selWidth {
    width: 100%;
  }

  .selWidthd {
    width: 300px;
  }

  .button-new-tag {
    height: 28px;
    line-height: 26px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .iview-video-style {
    width: 40%;
    height: 180px;
    border-radius: 10px;
    background-color: #707070;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
  }

  .iconv {
    color: #fff;
    line-height: 180px;
    display: inherit;
    font-size: 26px;
    position: absolute;
    top: -74px;
    left: 50%;
    margin-left: -25px;
  }

  .iview-video-style .mark {
    position: absolute;
    width: 100%;
    height: 30px;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
  }

  .uploadVideo {
    margin-left: 10px;
  }

  .perW50 {
    width: 50%;
  }

  .submission {
    margin-left: 10px;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }

  .labeltop {
    /deep/.el-form-item__label {
      float: none !important;
      display: inline-block !important;
      margin-left: 120px !important;
      width: auto !important;
    }
  }
</style>
